import React, { Component } from "react";
// import Geolocation from 'react-amap-plugin-geolocation';

import schoolimg from "../img/school.png";
import loc from "../img/screenImg/loc.png";
import stu from '../img/screenImg/stu.png'
import grider from "../img/screenImg/grider.png";
import specialstu from "../img/screenImg/specialStu.png";
import fiveold from "../img/screenImg/fiveold.png";



import {
    Layout, Menu, Icon, Tooltip, Table, Divider, Button, Modal, Form, Input, DatePicker,
    Select, Popconfirm, message, Alert, TreeSelect, TimePicker, Tree,
    AutoComplete, Tabs, Col, Row, Dropdown, Card, Pagination, Spin, Skeleton,
    Drawer, Tag, Badge, Radio, Steps, Transfer, notification, Empty, Calendar, Checkbox, Popover, Upload
} from "antd";

// import { AppleOutlined, AndroidOutlined } from '@ant-design/icons';
import { ScheduleTwoTone, AppstoreTwoTone, CheckCircleTwoTone } from '@ant-design/icons';


import { getGridStudentInfoApi, getSpecialGridStudentInfoApi, getNotSpecialGridStudentInfoApi, getGridFiveOldStaffApi, getSchoolInfoApi } from '../js/api.js'
import { UpdateSpecialGridStudentInfoApi, deleteSpecialGridStudentInfoApi, deleteAllGridStudentBySchoolIdApi} from '../js/api.js'


import { addGridStudentApi, addGridFiveOldStaffApi, addGridOutAdminApi } from "../js/inadmingridApi.js"
import { basrUrl } from '../js/config.js'

import { gridStudentUrl, gridFiveOldStaffUrl, gridOutAdminUrl } from '../js/config.js'


import { getOutAdminGridApi, updateOutAdminGridApi, deleteOutAdminGridApi, deleteFiveOldStaffGridApi, updateFiveOldStaffGridApi } from "../js/api.js"





const success = () => {
    message.success({
        content: '操作成功',
        className: 'custom-class',
        style: {
            marginTop: '48vh',
        },
    });
};
const fail = (s) => {
    message.success({
        content: s,
        className: 'custom-class',
        style: {
            marginTop: '48vh',
        },
    });
};
const AMap = require("AMap");
const Loca = require("Loca");
const AMapUI = require("AMapUI");
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const Option = Select.Option;




class StudentsGrid extends Component {

    constructor(props) {
        super(props)

        this.state = {
            columnsData: [],
            tableLoading: false,
            filteredInfo: null,
            sortedInfo: null,
            isSearch: false,
            defaultActiveKey: "1",
            maploading: true,

            fileList: [],
            uploading: false,
            addVisible: false,
            buttonFlag: ''

        }
    }

    componentDidMount() {
        this.refreshData()
    }


    showAddModal = () => {

        this.setState({
            addVisible: true,
            fileList: [],
        });
    }

    handleCancel = e => {
        //console.log("")
        this.setState({
            addVisible: false,
            fileList: [],
            uploading: false
        });

        message.destroy();
    };


    handleUpload = (e) => {
        let schoolId = sessionStorage.getItem("departmentId")
        const { fileList, buttonFlag } = this.state;
        const formData = new FormData();
        fileList.forEach(file => {
            formData.append('upfile', file);
        });


        this.setState({
            uploading: true,
        });

        message.destroy();
        formData.append('schoolId', schoolId)
        addGridStudentApi(formData).then((res) => {
            if (res.data == 'success') {
                this.setState({
                    fileList: [],
                    uploading: false,
                    addVisible: false
                });
                this.refreshData();
                message.destroy();
                message.success('导入成功！');
            }
            else {
                this.setState({
                    uploading: false,
                });
            
              message.error("第"+res.data+"行出现空格等特殊字符，请仔细检查该行。", 0);
            }
            this.setState({
                fileList: [],
                uploading: false,
            });
        })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            })

    }



    refreshData() {


        this.setState({
            tableLoading: true
        });

        let columnData = [];
        const schoolId = parseInt(sessionStorage.getItem("departmentId"))

        getGridStudentInfoApi(schoolId)
            .then(res => {


                let makers = []
                let points = []


                //过滤没有经纬度的坐标
                let arr = res.data.filter((item, index) => parseInt(item.longitude) > 0)
                arr.forEach((item, index) => {
                    points.push({

                        "lng": parseFloat(item.longitude), "lat": parseFloat(item.latitude), "count": 40
                    })
                    makers.push({
                        position: {
                            longitude: parseFloat(item.longitude),
                            latitude: parseFloat(item.latitude)
                        },
                        grade: item.grade,
                        name: item.studentName,
                        id: item.id,
                        special: item.special,
                        addressDetail: item.addressDetail
                    }
                    );
                });



                res.data.forEach((item, index) => {
                    columnData.push({
                        key: index + 1,
                        studentName: item.studentName,
                        grade: item.grade,
                        parents: item.parents,
                        parentsPhone: item.parentsPhone,
                        county: item.county,
                        id: item.id,
                        addressDetail: item.addressDetail,
                        resident:item.resident == 1 ? '是' : '否',
                        longitude: parseFloat(item.longitude),
                        latitude: parseFloat(item.latitude),



                    });
                });
                this.setState({
                    columnsData: columnData,
                    tableLoading: false,

                    studentMakers: makers
                });


            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }

    onRef = (ref) => {
        this.child = ref
    }
    handleChange = (pagination, filters, sorter) => {
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }

    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
        // this.setState({
        //     searchTextAddress: selectedKeys[0],
        //     searchTextReporter: selectedKeys[0]
        // });
    }

    handleSearchReset = clearFilters => () => {
        clearFilters();
        // this.setState({
        //     searchTextAddress: '',
        //     searchTextReporter: '',
        // });
    }



    searchChange(pagination, filters, sorter, extra) {

    }
    handleClickOpenMap = (type, record) => {
        this.setState({
            defaultActiveKey: "2"

        }, () => {

            this.child.hadleSetFitView(record);
        })




    }
    tabClickHandler = (params) => {
        this.setState({
            defaultActiveKey: params

        })

    }


    deleteAllGridStudent = () => {
        let schoolId = sessionStorage.getItem("departmentId")
        deleteAllGridStudentBySchoolIdApi(schoolId)
        .then(res => {
            if (res.data == "success") {
                message.success("删除成功!");
                this.refreshData();
            }else {
                message.error('删除失败,请稍后再试!');
            }
        })
        .catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message);
            }
        });
    }




    render() {

        const { uploading, fileList } = this.state;
        const props = {
            onRemove: file => {
                this.setState(state => {
                    const index = state.fileList.indexOf(file);
                    const newFileList = state.fileList.slice();
                    newFileList.splice(index, 1);
                    return {
                        fileList: newFileList,
                    };
                });
            },
            beforeUpload: file => {

                this.setState(state => ({
                    fileList: [...state.fileList, file],
                }));

                return false;
            },
            fileList,
        }

        const columns = [{
            title: "序号",
            dataIndex: "key",
            key: "key"
        }, {
            title: "学生姓名",
            dataIndex: "studentName",
            key: "id",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.studentName.includes(value),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }
        }, {
            title: "班级",
            dataIndex: "grade",
            key: "grade",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.grade.includes(value),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            },
            // sortDirections: ['descend'],
            sorter: (a, b) => { return a.grade.localeCompare(b.grade) },
        },
        {
            title: "所在区",
            dataIndex: "county",
            key: "county",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.county.includes(value),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }

        },
        {
            title: "住校生",
            dataIndex: "resident",
            key: "resident",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.resident.includes(value),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            },
            // sortDirections: ['descend'],
            sorter: (a, b) => { return a.resident.localeCompare(b.resident) },
        },

        {
            title: "家长姓名",
            dataIndex: "parents",
            key: "parents"
        },
        {
            title: "家长电话",
            dataIndex: "parentsPhone",
            key: "parentsPhone"
        },
        {
            title: "详细住址",
            dataIndex: "addressDetail",
            key: "addressDetail"
        },
      
            //  {
            //     title: '定位',

            //     key: "action",
            //     render: (text, record) => (
            //         <span>
            //             <a onClick={() => this.handleClickOpenMap("find", record)}>

            //                 <img src={location} className='icon' style={{
            //                     verticalAlign: 'middle',
            //                     width: '30px',
            //                     height: '30px',
            //                     marginRight: '5px'
            //                 }} /></a>
            //         </span>
            //     ),
            // }



        ];







        return (


            <div  >

                <div>

                    <Button type="primary" onClick={() => this.showAddModal()} size="large" style={{ marginLeft: 15 }}>
                        <Icon type="plus" theme="outlined" />学生信息导入
                    </Button>

                    <Button href={gridStudentUrl} style={{ marginLeft: 15 }} size="large"><Icon type="download" />下载学生信息导入模板</Button>

                    <Popconfirm title="确定删除？" okText="确定" cancelText="取消"
                        onConfirm={() => this.deleteAllGridStudent()}>
                       <Button type="primary" size="large" style={{ marginLeft: 15 }}>
                        <Icon type="delete" theme="outlined" />全部删除
                    </Button>
                    </Popconfirm>
                  
                    {
                        this.state.addVisible ? (


                            <div>

                                <Modal
                                    title={"导入学生信息"}
                                    visible={this.state.addVisible}
                                    onCancel={this.handleCancel}
                                    maskClosable={false}
                                    footer={[]}
                                    centered={true}
                                    style={{ marginLeft: 15 }}
                                >
                                    <Spin tip="导入数据时间较长，请耐心等待！" spinning={this.state.uploading} size="large">
                                        <Upload {...props}>
                                            <Button >
                                                <Icon type="upload" />选择文件
                    </Button>
                                        </Upload>

                                        <Button
                                            type="primary"
                                            onClick={this.handleUpload}
                                            disabled={fileList.length === 0}
                                            loading={uploading}
                                            style={{ marginTop: 16 }}
                                        >
                                            {uploading ? '正在上传' : '开始上传'}
                                        </Button>
                                    </Spin>
                                </Modal>

                            </div>


                        )
                            : null
                    }

                </div>

                <Tabs activeKey={this.state.defaultActiveKey} onTabClick={(params) => this.tabClickHandler(params)}>

                    <TabPane
                        tab={
                            <span className="tab_span">
                                <ScheduleTwoTone />

                                生源表格
        </span>
                        }
                        key="1"
                    >



                        <Table
                            dataSource={this.state.columnsData}
                            onChange={this.searchChange}
                            columns={columns}
                            loading={this.state.tableLoading}
                            locale={{ emptyText: '暂无数据' }}
                            rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                            pagination={{  //分页
                                // total: this.state.columnData.length, //数据总数量
                                defaultPageSize: 10, //默认显示几条一页
                                //pageSize: 10,
                                showTotal: function (total) {  //设置显示一共几条数据
                                    return '共 ' + total + ' 条数据';
                                },
                                showSizeChanger: true,
                                showQuickJumper: true,
                                pageSizeOptions: [5, 10, 20, 30]
                            }}
                        >


                        </Table>
                    </TabPane>
                    <TabPane
                        style={{ height: '100%' }}
                        tab={
                            <span className="tab_span">
                                <AppstoreTwoTone />
                                生源地图
        </span>
                        }
                        key="2"
                    >
                        {/* <Spin tip="Loading..."  spinning={this.state.maploading} > */}



                        <GridMap mapOption={{
                            mapStyle: false,
                            center: [120.70833277343749, 29.998505038624792],
                            status: {

                                zoomEnable: true,
                                resizeEnable: true,

                            }
                        }}
                            markers={
                                this.state.studentMakers
                            } />


                    </TabPane>

                </Tabs>

            </div>
        )
    }


}



class fourspecialgrid extends Component {


    constructor(props) {
        super(props)

        this.state = {
            columnsData: [],
            tableLoading: false,

            modlVisible: false,
            selectedItems: [],
            specialStudentMakers: [],
            classes: [],
            selectrecord: {},
            defaultActiveKey: "1"

        }
        this.refreshData = this.refreshData.bind(this);
    }

    componentDidMount() {
        this.refreshData()
        // console.log('StudentsGrid');
    }





    refreshData() {


        this.setState({
            tableLoading: true
        });

        let columnData = [];
        const schoolId = parseInt(sessionStorage.getItem("departmentId"))

        getSpecialGridStudentInfoApi(schoolId)
            .then(res => {

                let makers = []
                let points = []
                res.data.forEach((item, index) => {

                    makers.push({
                        position: {
                            longitude: parseFloat(item.longitude),
                            latitude: parseFloat(item.latitude)
                        },
                        grade: item.grade,
                        name: item.studentName,
                        id: item.id,
                        special: item.special,
                        addressDetail: item.addressDetail
                    }
                    );
                });

                res.data.forEach((item, index) => {
                    columnData.push({
                        key: index + 1,
                        studentName: item.studentName,
                        grade: item.grade,
                        id: item.id,
                        addressDetail: item.addressDetail,
                        resident: item.resident == 1 ? '是' : '否',
                        physique: item.physique,
                        psychological: item.psychological,
                        family: item.family,
                        behavior: item.behavior

                    });
                });
                this.setState({
                    columnsData: columnData,
                    specialStudentMakers: makers,
                    tableLoading: false
                });


            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }

    onRef = (ref) => {

        this.child = ref
    }
    handleChange = (pagination, filters, sorter) => {

        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }

    handleSearch = (selectedKeys, confirm) => () => {
        confirm();

    }

    handleSearchReset = clearFilters => () => {
        clearFilters();

    }
    confirmDelete = (record) => {


        const schoolId = parseInt(sessionStorage.getItem("departmentId"))

        deleteSpecialGridStudentInfoApi(schoolId, record.id, record.studentName)
            .then(res => {
                if (res.data == 'success') {
                    this.refreshData()
                    success()
                }
                else {
                    fail('删除失败')
                }


            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });











    }
    setModalVisible(modalVisible) {
        this.setState({
            modlVisible: modalVisible,
            selectrecord: {}
        });


    }

    searchChange(pagination, filters, sorter, extra) {

    }
    handleClickOpenModal = (type, record) => {

        this.setState({
            modlVisible: true,
            selectrecord: record,
        })

    }
    tabClickHandler = (params) => {
        this.setState({
            defaultActiveKey: params

        })

    }


    render() {



        const columns = [{
            title: "序号",
            dataIndex: "key",
            key: "key"
        }, {
            title: "学生姓名",
            dataIndex: "studentName",
            key: "id",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.studentName.includes(value),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }
        }, {
            title: "班级",
            dataIndex: "grade",
            key: "grade",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.grade.includes(value),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            },
            sortDirections: ['descend'],
            sorter: (a, b) => { return a.grade.localeCompare(b.grade) },
        },

        {
            title: "住校生",
            dataIndex: "resident",
            key: "resident",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.resident.includes(value),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }
        },
        {
            title: "特殊体质",
            dataIndex: "physique",
            key: "physique"
        },
        {
            title: "特殊心理",
            dataIndex: "psychological",
            key: "psychological"
        },
        {
            title: "特殊家庭",
            dataIndex: "family",
            key: "family"
        },

        {
            title: "特殊行为",
            dataIndex: "behavior",
            key: "behavior"
        },
        {
            title: "操作详情",
            key: "action",
            render: (text, record) => (
                <span>
                    <a onClick={() => this.handleClickOpenModal("update", record)}>修改</a>
                    <Divider type="vertical" />

                    <Popconfirm title="确定删除？" onConfirm={() => { this.confirmDelete(record) }} okText="确定" cancelText="取消">
                        <a>删除</a>
                    </Popconfirm>
                </span>
            ),

        }

        ];





        return (

            <div  >

                <div style={{}}>
                    <Button type="primary" onClick={() => this.setModalVisible(true)} size="large">
                        <Icon type="user-add" />新增四特学生
                    </Button>


                    <Modal
                        //  title="新增四特学生，至少选择一种特殊类型"
                        closable={true}
                        maskClosable={false}
                        centered
                        visible={this.state.modlVisible}
                        onOk={() => this.child.handlesubmit()}
                        onCancel={() => this.setModalVisible(false)}
                    >


                        <AddSpecialStudentForm record={this.state.selectrecord} submitmodal={this.setModalVisible.bind(this)} ref="updateUserFormValue" onRef={(child) => { this.child = child }}
                            refresh={this.refreshData} />
                    </Modal>
                </div>

                <Tabs activeKey={this.state.defaultActiveKey} onTabClick={(params) => this.tabClickHandler(params)}>
                    <TabPane
                        tab={
                            <span className="tab_span">
                                <ScheduleTwoTone />

                                四特表格
        </span>
                        }
                        key="1"
                    >





                        <Table
                            dataSource={this.state.columnsData}
                            onChange={this.searchChange}
                            columns={columns}
                            loading={this.state.tableLoading}
                            locale={{ emptyText: '暂无数据' }}
                            rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                            pagination={{  //分页
                                // total: this.state.columnData.length, //数据总数量
                                defaultPageSize: 10, //默认显示几条一页
                                //pageSize: 10,
                                showTotal: function (total) {  //设置显示一共几条数据
                                    return '共 ' + total + ' 条数据';
                                },
                                showSizeChanger: true,
                                showQuickJumper: true,
                                pageSizeOptions: [5, 10, 20, 30]
                            }}

                        >


                        </Table>
                    </TabPane>
                    <TabPane
                        style={{ height: '100%' }}
                        tab={
                            <span className="tab_span">
                                <AppstoreTwoTone />
                                四特地图
        </span>
                        }
                        key="2"
                    >
                        <GridMap mapOption={{
                            mapStyle: false,
                            center: [120.70833277343749, 29.998505038624792],
                            status: {

                                zoomEnable: true,
                                resizeEnable: true,

                            }
                        }}
                            markers={
                                this.state.specialStudentMakers
                            } />

                    </TabPane>
                </Tabs>


            </div>
        )
    }
}
const FourSepcialGrid = Form.create()(fourspecialgrid)

class addspecialstudentform extends Component {
    constructor(props) {
        super(props);


        this.state = {

            allnotspecial: [],
            id: this.props.record.id ? this.props.record.id : null,
            studentName: this.props.record.studentName === 'undefined' ? null : this.props.record.studentName,
            record: this.props.record

        }

    }

    componentDidMount() {
        this.props.onRef(this);
        let allnotspecial = [];
        const schoolId = parseInt(sessionStorage.getItem("departmentId"))
        getNotSpecialGridStudentInfoApi(schoolId)
            .then(res => {

                res.data.map((item) => {
                    let ss = {
                        studentName: item.studentName,
                        id: item.id,
                        // grade:item.grade

                    }
                    allnotspecial.push(ss)
                })
                this.setState({
                    allnotspecial: allnotspecial
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });

        //     getNotBlueToothClassApi(schoolId)
        //     .then(res => {
        //         this.setState({
        //             classes: res.data
        //         });
        //     })
        //     .catch((e) => {
        //         if (e.response) {
        //             //请求已发出，服务器返回状态码不是2xx。
        //             console.info(e.response.data)
        //             console.info(e.response.status)
        //             console.info(e.response.headers)
        //         } else if (e.request) {
        //             // 请求已发出，但没有收到响应
        //             // e.request 在浏览器里是一个XMLHttpRequest实例，
        //             // 在node中是一个http.ClientRequest实例
        //             console.info(e.request)
        //         } else {
        //             //发送请求时异常，捕捉到错误
        //             console.info('error', e.message);
        //         }
        //         console.info(e.config)
        //     });




    }
    filterOption=(inputValue, option)=>{undefined
        if(option.children.indexOf(inputValue)!=-1){//模糊匹配
        return true;
        }else{undefined
        return false;
        }}

    handleChange = (selectedKeys, selectedItems) => {
        // console.log("selectedItems ", selectedKeys, selectedItems  );

        this.setState({
            id: parseInt(selectedItems.key),
            studentName: selectedKeys

        })

    }
    handlesubmit = e => {


        //  阻止默认提交刷新页面事件

        let stulist = []
        stulist = this.props.form.getFieldsValue();

        let a = "schoolId";
        let b = 'id'
        stulist[a] = parseInt(sessionStorage.getItem("departmentId"));
        stulist[b] = this.state.id


        if (stulist.physique || stulist.psychological || stulist.behavior || stulist.family) {

            UpdateSpecialGridStudentInfoApi(stulist)
                .then(res => {
                    
                    
                    if (res.data == 'success') {
                        this.props.submitmodal(false)
                        this.props.refresh()
                        this.props.form.resetFields()
                        success()
                    }
                    else {
                        fail('操作失败')
                    }



                })
                .catch((e) => {
                    if (e.response) {
                        //请求已发出，服务器返回状态码不是2xx。
                        console.info(e.response.data)
                        console.info(e.response.status)
                        console.info(e.response.headers)
                    } else if (e.request) {
                        // 请求已发出，但没有收到响应
                        // e.request 在浏览器里是一个XMLHttpRequest实例，
                        // 在node中是一个http.ClientRequest实例
                        console.info(e.request)
                    } else {
                        //发送请求时异常，捕捉到错误
                        console.info('error', e.message);
                    }
                    console.info(e.config)
                });


        }
        else {
            fail('操作失败，请至少填写一项特殊类型')

        }




    };
    componentWillReceiveProps(nextProps) {

        let record = nextProps.record;
        this.setState({
            record: record
        })

    }



    render() {
        const { getFieldDecorator, getFieldValue } = this.props.form;
         
        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 14 },
        };
        const allnotspecialOption = this.state.allnotspecial.map(v1 => {
            return (
                <Option key={v1.id} title={v1.studentName} value={v1.studentName}>{v1.studentName}</Option>
            );
        });

        let grade = [];


        this.state.allnotspecial.map((item) => { grade.push(item.grade) })
        grade.sort((a, b) => { return a.localeCompare(b) })
        const gradeOption = grade.map(v1 => {
            return (
                <Option value={v1}>{v1}</Option>
            );
        });


        return (

            <div style={{ marginBottom: 16, marginTop: 32 }}>

                <Form onSubmit={this.handlesubmit}>

                    <FormItem
                        label='学生姓名'
                        
                        {...formItemLayout}>
                        {/* 添加默认值 */}
                        {getFieldDecorator("studentName", { initialValue: this.state.record.studentName ? this.state.record.studentName : null }, {


                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",


                            }]
                        })(<Select                           
                            size="large"
                            onChange={this.handleChange}
                            placeholder="请选择学生姓名"
                            showSearch
                            optionFilterProp="children"
                            filterOption={(input, option) =>{
                            console.log(input, option)
                             return  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }}>
                                    {allnotspecialOption}
                                    </Select>)}
                    </FormItem>


                    <FormItem
                        label='特殊体质'
                        {...formItemLayout}>
                        {getFieldDecorator("physique", { initialValue: this.state.record.physique ? this.state.record.physique : null }, {

                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",


                            }]
                        })(<Input
                            allowClear={true}
                            style={{ width: '100%' }}
                            placeholder="请填写内容"
                        ></Input>)}
                    </FormItem>
                    <FormItem
                        label='特殊行为'
                        {...formItemLayout}>
                        {getFieldDecorator("behavior", { initialValue: this.state.record.behavior ? this.state.record.behavior : null }, {

                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",


                            }]
                        })(<Input
                            allowClear={true}
                            style={{ width: '100%' }}
                            placeholder="请填写内容"
                        ></Input>)}
                    </FormItem>
                    <FormItem
                        label='特殊心理'
                        {...formItemLayout}>
                        {getFieldDecorator("psychological", { initialValue: this.state.record.psychological ? this.state.record.psychological : null }, {

                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",


                            }]
                        })(<Input
                            allowClear={true}
                            style={{ width: '100%' }}
                            placeholder="请填写内容"
                        ></Input>)}
                    </FormItem>
                    <FormItem
                        label='特殊家庭'
                        {...formItemLayout}>
                        {getFieldDecorator("family", { initialValue: this.state.record.family ? this.state.record.family : null }, {

                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",


                            }]
                        })(<Input
                            allowClear={true}
                            style={{ width: '100%' }}
                            placeholder="请填写内容"
                        ></Input>)}
                    </FormItem>



                </Form>
            </div>
        );
    }
}
const AddSpecialStudentForm = Form.create()(addspecialstudentform);



class addGridFiveOldStaffgrid extends Component {


    constructor(props) {
        super(props)

        this.state = {
            columnsData: [],
            tableLoading: false,

            modlVisible: false,
            selectedItems: [],
            defaultActiveKey: '1',
            classes: [],
            fiveOldMakers: [],
            selectrecord: {},

            fileList: [],
            uploading: false,
            addVisible: false,
            buttonFlag: ''

        }
        this.refreshData = this.refreshData.bind(this);
    }

    componentDidMount() {
        this.refreshData()

    }



    showAddModal = () => {

        this.setState({
            addVisible: true,
            fileList: [],
        });
    }

    handleCancel = e => {

        this.setState({
            addVisible: false,
            fileList: [],
            uploading: false
        });
    };

    handleUpload = (e) => {
        let schoolId = sessionStorage.getItem("departmentId")
        const { fileList, buttonFlag } = this.state;
        const formData = new FormData();
        fileList.forEach(file => {
            formData.append('upfile', file);
        });


        this.setState({
            uploading: true,
        });
        message.destroy();
        formData.append('schoolId', schoolId)
        addGridFiveOldStaffApi(formData).then((res) => {
            if (res.data == 'success') {
                this.setState({
                    fileList: [],
                    uploading: false,
                    addVisible: false
                });
                this.refreshData();
                message.destroy();
                message.success('导入成功！');
            }
            else {
                this.setState({
                    uploading: false,
                });
                // message.error(res.data);
                message.error("第"+res.data+"行出现空格等特殊字符，请仔细检查该行。", 0);
            }
            this.setState({
                fileList: [],
                uploading: false,
            });


        })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            })

    }




    refreshData() {

        this.setState({
            tableLoading: true
        });

        let columnData = [];
        const schoolId = parseInt(sessionStorage.getItem("departmentId"))
        getGridFiveOldStaffApi(schoolId)
            .then(res => {

                let makers = []

                let arr = res.data.gridFiveOldStaffs.filter((item, index) => parseInt(item.longitude) > 0)
                arr.forEach((item, index) => {

                    makers.push({
                        position: {
                            longitude: parseFloat(item.longitude),
                            latitude: parseFloat(item.latitude)
                        },
                        identity: item.identity,
                        name: item.name,
                        id: item.id,
                        // special:item.special,
                        addressDetail: item.addressDetail
                    }
                    );
                });




                res.data.gridFiveOldStaffs.forEach((item, index) => {
                    columnData.push({
                        key: index + 1,
                        name: item.name,
                        sex: item.sex,
                        id: item.id,
                        addressDetail: item.addressDetail,
                        gridContactPersonPhone: item.gridContactPersonPhone,
                        gridContactPerson: item.gridContactPerson,
                        identity: item.identity,
                        county: item.county,
                        phone: item.phone



                    });
                });
                this.setState({
                    columnsData: columnData,
                    tableLoading: false,
                    fiveOldMakers: makers
                });


            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }

    onRef = (ref) => {
        this.child = ref
    }
    handleChange = (pagination, filters, sorter) => {

        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }

    handleSearch = (selectedKeys, confirm) => () => {
        confirm();

    }

    handleSearchReset = clearFilters => () => {
        clearFilters();

    }
    confirmDelete = (record) => {

        const schoolId = parseInt(sessionStorage.getItem("departmentId"))

        deleteFiveOldStaffGridApi(schoolId, record.id, record.name)
            .then(res => {
                if (res.data == 'success') {
                    this.refreshData()
                    success()
                }
                else {
                    fail('删除失败')
                }

            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });



    }
    setModalVisible(modalVisible) {
        
        this.setState({
            modlVisible: modalVisible,
            selectrecord: {}
        });
    }

    searchChange(pagination, filters, sorter, extra) {


    }
    handleClickOpenModal = (type, record) => {
        this.setState({
            modlVisible: true,
            selectrecord: record,
        })

    }
    tabClickHandler = (params) => {
        this.setState({
            defaultActiveKey: params

        })

    }




    render() {



        const { uploading, fileList } = this.state;
        const props = {
            onRemove: file => {
                this.setState(state => {
                    const index = state.fileList.indexOf(file);
                    const newFileList = state.fileList.slice();
                    newFileList.splice(index, 1);
                    return {
                        fileList: newFileList,
                    };
                });
            },
            beforeUpload: file => {

                this.setState(state => ({
                    fileList: [...state.fileList, file],
                }));

                return false;
            },
            fileList,
        }



        const columns = [{
            title: "序号",
            dataIndex: "key",
            key: "key"
        }, {
            title: "姓名",
            dataIndex: "name",
            key: "id",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.name.includes(value),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }
        }, {
            title: "性别",
            dataIndex: "sex",
            key: "sex",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.sex.includes(value),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            },
            sortDirections: ['descend'],
            sorter: (a, b) => { return a.grade.localeCompare(b.grade) },
        },


        {
            title: "五老类型",
            dataIndex: "identity",
            key: "identity"
        },
        {
            title: "所在区",
            dataIndex: "county",
            key: "county"
        },


        {
            title: "联系电话",
            dataIndex: "phone",
            key: "phone"
        },
        {
            title: "网格员",
            dataIndex: "gridContactPerson",
            key: "gridContactPerson"
        },
        {
            title: "网格员电话",
            dataIndex: "gridContactPersonPhone",
            key: "gridContactPersonPhone"
        },
        {
            title: "详细地址",
            dataIndex: "addressDetail",
            key: "addressDetail"
        },
        {
            title: "操作详情",
            key: "action",
            render: (text, record) => (
                <span>
                    <a onClick={() => this.handleClickOpenModal("update", record)}>修改</a>
                    <Divider type="vertical" />

                    <Popconfirm title="确定删除？" onConfirm={() => { this.confirmDelete(record) }} okText="确定" cancelText="取消">
                        <a>删除</a>
                    </Popconfirm>
                </span>
            ),

        }

        ];





        return (

            <div  >


                <div>
                    <Button type="primary" onClick={() => this.showAddModal()} size="large" style={{ marginLeft: 15 }}>
                        <Icon type="plus" theme="outlined" />五老人员信息导入
                    </Button>
                    <Button href={gridFiveOldStaffUrl} style={{ marginLeft: 15 }} size="large"><Icon type="download" />下载五老人员导入模板</Button>

                    {
                        this.state.addVisible ? (
                            <Modal
                                title={"导入五老人员信息"}
                                visible={this.state.addVisible}
                                onCancel={this.handleCancel}
                                closable
                                maskClosable={false}
                                footer={[]}
                                centered={true}
                                style={{ marginLeft: 15 }}
                            >
                                <Spin tip="导入数据时间较长，请耐心等待！" spinning={this.state.uploading} size="large">
                                    <Upload {...props}>
                                        <Button >
                                            <Icon type="upload" />选择文件
                    </Button>
                                    </Upload>

                                    <Button
                                        type="primary"
                                        onClick={this.handleUpload}
                                        disabled={fileList.length === 0}
                                        loading={uploading}
                                        style={{ marginTop: 16 }}
                                    >
                                        {uploading ? '正在上传' : '开始上传'}
                                    </Button>
                                </Spin>
                            </Modal>) : null
                    }
                </div>

                <Tabs activeKey={this.state.defaultActiveKey} onTabClick={(params) => this.tabClickHandler(params)}>
                    <TabPane
                        tab={
                            <span className="tab_span">
                                <ScheduleTwoTone />

                                五老表格
        </span>
                        }
                        key="1"
                    >


                        <div style={{ marginBottom: 16 }}>
                            {/* <Button type="primary" onClick={() => this.setModalVisible(true)} size="large">
                        <Icon type="user-add" />新增五老人员
                    </Button> */}


                            <Modal

                                closable={false}
                                maskClosable={false}
                                centered
                                visible={this.state.modlVisible}
                                onOk={() => this.child.handlesubmit()}
                                onCancel={() => this.setModalVisible(false)}
                            >


                                <AddGridFiveOldStaffForm record={this.state.selectrecord} submitmodal={this.setModalVisible.bind(this)} onRef={(child) => { this.child = child }} refresh={this.refreshData} />
                            </Modal>
                        </div>


                        <Table
                            dataSource={this.state.columnsData}
                            onChange={this.searchChange}
                            columns={columns}
                            loading={this.state.tableLoading}
                            locale={{ emptyText: '暂无数据' }}
                            rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                            pagination={{  //分页
                                // total: this.state.columnData.length, //数据总数量
                                defaultPageSize: 10, //默认显示几条一页
                                //pageSize: 10,
                                showTotal: function (total) {  //设置显示一共几条数据
                                    return '共 ' + total + ' 条数据';
                                },
                                showSizeChanger: true,
                                showQuickJumper: true,
                                pageSizeOptions: [5, 10, 20, 30]
                            }}

                        >


                        </Table>
                    </TabPane>
                    <TabPane
                        style={{ height: '100%' }}
                        tab={
                            <span className="tab_span">
                                <AppstoreTwoTone />
                                五老地图
        </span>
                        }
                        key="2"
                    >

                        <div ></div>

                        <GridMap mapOption={{
                            mapStyle: false,
                            center: [120.70833277343749, 29.998505038624792],
                            status: {

                                zoomEnable: true,
                                resizeEnable: true,

                            }
                        }}
                            markers={
                                this.state.fiveOldMakers
                            } />

                    </TabPane>
                </Tabs>


            </div>
        )
    }
}
const AddGridFiveOldStaffGrid = Form.create()(addGridFiveOldStaffgrid)

class addGridFiveOldStaffform extends Component {
    constructor(props) {
        super(props);

        this.state = {
            allnotspecial: [],
            id: this.props.record.id ? this.props.record.id : null,
            name: this.props.record.name === 'undefined' ? null : this.props.record.name,
            record: this.props.record
        }

    }

    componentDidMount() {
        this.props.onRef(this);
    }

    
    componentWillReceiveProps(props) {
        let record = props.record;
        this.setState({
            id: record.id,
            record: record
        })

        console.log("this.id1======", this.state.id)
    }

    handleChange = (selectedKeys, selectedItems) => {

        console.log("selectedItems.key=======", selectedItems.key)

        this.setState({
            id: parseInt(selectedItems.key),
            name: selectedKeys

        })
    }

    handlesubmit = e => {
        //  阻止默认提交刷新页面事件

        let stulist = []
        stulist = this.props.form.getFieldsValue();

        let a = "schoolId";
        let b = 'id'
        stulist[a] = parseInt(sessionStorage.getItem("departmentId"))
        stulist[b] = this.state.id


        if (stulist.name || stulist.phone || stulist.county || stulist.identity || stulist.gridContactPerson || stulist.gridContactPersonPhone || stulist.addressDetail) {

            updateFiveOldStaffGridApi(stulist)
                .then(res => {

                    if (res.data == 'success') {
                        this.props.submitmodal(false)
                        this.props.refresh()
                        this.props.form.resetFields()
                        success()
                    }
                    else {
                        fail('操作失败')
                    }



                })
                .catch((e) => {
                    if (e.response) {
                        //请求已发出，服务器返回状态码不是2xx。
                        console.info(e.response.data)
                        console.info(e.response.status)
                        console.info(e.response.headers)
                    } else if (e.request) {
                        // 请求已发出，但没有收到响应
                        // e.request 在浏览器里是一个XMLHttpRequest实例，
                        // 在node中是一个http.ClientRequest实例
                        console.info(e.request)
                    } else {
                        //发送请求时异常，捕捉到错误
                        console.info('error', e.message);
                    }
                    console.info(e.config)
                });


        }
        else {
            fail('操作失败，请至少填写一项特殊类型')

        }




    };






    render() {
        const { getFieldDecorator, getFieldValue } = this.props.form;


        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 14 },
        };


        return (

            <div style={{ marginBottom: 16, marginTop: 32 }}>



                <Form onSubmit={this.handlesubmit}>

                    <FormItem
                        label='姓名'
                        {...formItemLayout}>
                        {/* 添加默认值 */}
                        {getFieldDecorator("name", { initialValue: this.state.record.name ? this.state.record.name : null }, {


                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",


                            }]
                        })(
                            <Input
                                disabled={true}
                                size="large"
                                onChange={this.handleChange}
                                placeholder="请输入姓名"

                            ></Input>
                        )}
                    </FormItem>


                    <FormItem
                        label='五老类型'
                        {...formItemLayout}>
                        {getFieldDecorator("identity", { initialValue: this.state.record.identity ? this.state.record.identity : null }, {

                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",


                            }]
                        })(<Input
                            allowClear={true}
                            style={{ width: '100%' }}
                            placeholder="请输入五老类型"
                        ></Input>)}
                    </FormItem>
                    <FormItem
                        label='所在区'
                        {...formItemLayout}>
                        {getFieldDecorator("county", { initialValue: this.state.record.county ? this.state.record.county : null }, {

                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",


                            }]
                        })(<Input
                            allowClear={true}
                            style={{ width: '100%' }}
                            placeholder="请输入所在区"
                        ></Input>)}
                    </FormItem>

                    <FormItem
                        label='联系电话'
                        {...formItemLayout}>
                        {getFieldDecorator("phone", { initialValue: this.state.record.phone ? this.state.record.phone : null }, {

                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",

                            }]
                        })(<Input
                            allowClear={true}
                            style={{ width: '100%' }}
                            placeholder="请输入联系电话"
                        ></Input>)}
                    </FormItem>
                    <FormItem
                        label='网格员'
                        {...formItemLayout}>
                        {getFieldDecorator("gridContactPerson", { initialValue: this.state.record.gridContactPerson ? this.state.record.gridContactPerson : null }, {

                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",


                            }]
                        })(<Input
                            allowClear={true}
                            style={{ width: '100%' }}
                            placeholder="请输入网格员"
                        ></Input>)}
                    </FormItem>

                    <FormItem
                        label='网格员电话'
                        {...formItemLayout}>
                        {getFieldDecorator("gridContactPersonPhone", { initialValue: this.state.record.gridContactPersonPhone ? this.state.record.gridContactPersonPhone : null }, {

                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",


                            }]
                        })(<Input
                            allowClear={true}
                            style={{ width: '100%' }}
                            placeholder="请输入网格员电话"
                        ></Input>)}
                    </FormItem>

                    <FormItem
                        label='详细地址'
                        {...formItemLayout}>
                        {getFieldDecorator("addressDetail", { initialValue: this.state.record.addressDetail ? this.state.record.addressDetail : null }, {

                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",


                            }]
                        })(<Input
                            allowClear={true}
                            style={{ width: '100%' }}
                            placeholder="请输入详细地址"
                        ></Input>)}
                    </FormItem>





                </Form>
            </div>
        );
    }
}
const AddGridFiveOldStaffForm = Form.create()(addGridFiveOldStaffform);




//校外网格长==================================
class OutAdminGrid extends Component {

    constructor(props) {
        super(props)

        this.state = {
            columnsData: [],
            tableLoading: false,

            modlVisible: false,
            selectedItems: [],
            defaultActiveKey: '1',
            classes: [],
            fiveOldMakers: [],
            selectrecord: {},

            fileList: [],
            uploading: false,
            addVisible: false,
            buttonFlag: ''

        }
        this.refreshData = this.refreshData.bind(this);
    }

    componentDidMount() {
        this.refreshData()

    }



    showAddModal = () => {

        this.setState({
            addVisible: true,
            fileList: [],
        });
    }

    handleCancel = e => {

        this.setState({
            addVisible: false,
            fileList: [],
            uploading: false
        });
    };

    onRef = (ref) => {

        this.child = ref
    }

    handleChange = (pagination, filters, sorter) => {

        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }

    handleClickOpenModal = (type, record) => {

        this.setState({
            modlVisible: true,
            selectrecord: record,
        })

    }

    setModalVisible(modalVisible) {
        this.setState({
            modlVisible: modalVisible,
            selectrecord: {}
        });

    }

    confirmDelete = (record) => {

        const schoolId = parseInt(sessionStorage.getItem("departmentId"))


        deleteOutAdminGridApi(schoolId, record.id, record.wgNumber)
            .then(res => {
                if (res.data == 'success') {
                    this.refreshData()
                    success()
                }
                else {
                    fail('删除失败')
                }

            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });



    }

    handleUpload = (e) => {
        let schoolId = sessionStorage.getItem("departmentId")
        const { fileList, buttonFlag } = this.state;
        const formData = new FormData();
        fileList.forEach(file => {
            formData.append('upfile', file);
        });


        this.setState({
            uploading: true,
        });

        formData.append('schoolId', schoolId)
        addGridOutAdminApi(formData).then((res) => {
            
            if (res.data == 'success') {
                this.setState({
                    fileList: [],
                    uploading: false,
                    addVisible: false
                });
                this.refreshData();
                message.success('导入成功！');
            }
            else {
                this.setState({
                    uploading: false,
                });
                message.error(res.data);
            }
            this.setState({
                fileList: [],
                uploading: false,
            });
        })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            })

    }

    refreshData() {
        this.setState({
            tableLoading: true
        });

        let columnData = [];
        const schoolId = parseInt(sessionStorage.getItem("departmentId"))

        getOutAdminGridApi(schoolId)
            .then(res => {

                res.data.forEach((item, index) => {
                    columnData.push({
                        key: index + 1,
                        id: item.id,
                        wgNumber: item.wgNumber,
                        wgAdmin: item.wgAdmin,
                        wgPhone: item.wgphone,
                        wgArea: item.wgArea,
                        county: item.county,
                        addressDetail: item.addressDetail,
                    });
                });
                this.setState({
                    columnsData: columnData,
                    tableLoading: false
                });


            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }


    handleSearch = (selectedKeys, confirm) => () => {


        confirm();

    }

    handleSearchReset = clearFilters => () => {
        clearFilters();

    }



    render() {

        const { uploading, fileList } = this.state;
        const props = {
            onRemove: file => {
                this.setState(state => {
                    const index = state.fileList.indexOf(file);
                    const newFileList = state.fileList.slice();
                    newFileList.splice(index, 1);
                    return {
                        fileList: newFileList,
                    };
                });
            },
            beforeUpload: file => {

                this.setState(state => ({
                    fileList: [...state.fileList, file],
                }));

                return false;
            },
            fileList,
        }


        const columns = [{
            title: "序号",
            dataIndex: "key",
            key: "key"
        }, {
            title: "网格编号",
            dataIndex: "wgNumber",
            key: "id",
        }, {
            title: "姓名",
            dataIndex: "wgAdmin",
            key: "wgAdmin",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.wgAdmin.includes(value),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }

        },
        {
            title: "网格区域",
            dataIndex: "wgArea",
            key: "wgArea"
        },
        {
            title: "所在区",
            dataIndex: "county",
            key: "county"
        },

        {
            title: "联系电话",
            dataIndex: "wgPhone",
            key: "wgPhone"
        },
        {
            title: "详细地址",
            dataIndex: "addressDetail",
            key: "addressDetail"
        },
        {
            title: "操作详情",
            key: "action",
            render: (text, record) => (
                <span>
                    <a onClick={() => this.handleClickOpenModal("update", record)}>修改</a>
                    <Divider type="vertical" />

                    <Popconfirm title="确定删除？" onConfirm={() => { this.confirmDelete(record) }} okText="确定" cancelText="取消">
                        <a>删除</a>
                    </Popconfirm>
                </span>
            ),

        }

        ];

        return (

            <div>
                <Button type="primary" onClick={() => this.showAddModal()} size="large" style={{ marginLeft: 15 }}>
                    <Icon type="plus" theme="outlined" />网格长信息导入
            </Button>
                <Button href={gridOutAdminUrl} style={{ marginLeft: 15 }} size="large"><Icon type="download" />下载网格长导入模板</Button>

                {
                    this.state.addVisible ? (
                        <Modal
                            title={"导入网格长信息"}
                            visible={this.state.addVisible}
                            onCancel={this.handleCancel}
                            closable
                            maskClosable={false}
                            footer={[]}
                            centered={true}
                            style={{ marginLeft: 15 }}
                        >
                            <Spin tip="导入数据时间较长，请耐心等待！" spinning={this.state.uploading} size="large">
                                <Upload {...props}>
                                    <Button >
                                        <Icon type="upload" />选择文件
                                </Button>
                                </Upload>

                                <Button
                                    type="primary"
                                    onClick={this.handleUpload}
                                    disabled={fileList.length === 0}
                                    loading={uploading}
                                    style={{ marginTop: 16 }}
                                >
                                    {uploading ? '正在上传' : '开始上传'}
                                </Button>
                            </Spin>
                        </Modal>) : null
                }

                <div style={{ marginBottom: 16 }}>

                    <Modal

                        closable={false}
                        centered
                        visible={this.state.modlVisible}
                        onOk={() => this.child.handlesubmit()}
                        onCancel={() => this.setModalVisible(false)}
                    >


                        <AddOutAdminGridform record={this.state.selectrecord} submitmodal={this.setModalVisible.bind(this)} onRef={(child) => { this.child = child }} refresh={this.refreshData}
                        />
                    </Modal>
                </div>

                <Table
                    style={{ marginTop: 15 }}
                    dataSource={this.state.columnsData}
                    columns={columns}
                    loading={this.state.tableLoading}
                    locale={{ emptyText: '暂无数据' }}
                    rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                    pagination={{  //分页
                        // total: this.state.columnData.length, //数据总数量
                        defaultPageSize: 10, //默认显示几条一页
                        //pageSize: 10,
                        showTotal: function (total) {  //设置显示一共几条数据
                            return '共 ' + total + ' 条数据';
                        },
                        showSizeChanger: true,
                        showQuickJumper: true,
                        pageSizeOptions: [5, 10, 20, 30]
                    }}

                />
            </div>
        )
    }
}


class addOutAdminGridform extends Component {
    constructor(props) {
        super(props);


        this.state = {
            id: this.props.record.id ? this.props.record.id : null,
            wgAdmin: this.props.record.wgAdmin === 'undefined' ? null : this.props.record.wgAdmin,
            record: this.props.record

        }

    }

    componentDidMount() {
        this.props.onRef(this);
        let allnotspecial = [];
        const schoolId = parseInt(sessionStorage.getItem("departmentId"))


    }

    handleChange = (selectedKeys, selectedItems) => {


        this.setState({
            id: parseInt(selectedItems.key),
            wgAdmin: selectedKeys

        })

    }



    handlesubmit = e => {


        let stulist = []
        stulist = this.props.form.getFieldsValue();

        let a = "schoolId";
        let b = 'id'
        stulist[a] = parseInt(sessionStorage.getItem("departmentId"))
        stulist[b] = this.state.id

        if (stulist.wgAdmin || stulist.wgArea || stulist.county || stulist.wgPhone || stulist.addressDetail) {

            updateOutAdminGridApi(stulist)
                .then(res => {


                    if (res.data == 'success') {
                        this.props.submitmodal(false)
                        this.props.refresh()
                        this.props.form.resetFields()
                        success()
                    }
                    else {
                        fail('操作失败')
                    }



                })
                .catch((e) => {
                    if (e.response) {
                        //请求已发出，服务器返回状态码不是2xx。
                        console.info(e.response.data)
                        console.info(e.response.status)
                        console.info(e.response.headers)
                    } else if (e.request) {
                        // 请求已发出，但没有收到响应
                        // e.request 在浏览器里是一个XMLHttpRequest实例，
                        // 在node中是一个http.ClientRequest实例
                        console.info(e.request)
                    } else {
                        //发送请求时异常，捕捉到错误
                        console.info('error', e.message);
                    }
                    console.info(e.config)
                });


        }
        else {
            fail('操作失败，请至少填写一项特殊类型')

        }





    }

    componentWillReceiveProps(props) {
        let record = props.record;

        this.setState({
            record: record
        })


    }



    render() {
        const { getFieldDecorator, getFieldValue } = this.props.form;


        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 14 },
        };


        return (

            <div style={{ marginBottom: 16, marginTop: 32 }}>



                <Form onSubmit={this.handlesubmit}>

                    <FormItem
                        label='网格编号'
                        {...formItemLayout}>
                        {/* 添加默认值 */}
                        {getFieldDecorator("wgNumber", { initialValue: this.state.record.wgNumber ? this.state.record.wgNumber : null }, {


                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",

                            }]
                        })(
                            <Input

                                size="large"
                                disabled={true}
                                onChange={this.handleChange}
                                placeholder="请输入网格编号"

                            ></Input>
                        )}
                    </FormItem>

                    <FormItem
                        label='姓名'
                        {...formItemLayout}>
                        {getFieldDecorator("wgAdmin", { initialValue: this.state.record.wgAdmin ? this.state.record.wgAdmin : null }, {

                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",


                            }]
                        })(<Input
                            allowClear={true}

                            style={{ width: '100%' }}
                            placeholder="请输入姓名"
                        ></Input>)}
                    </FormItem>
                    <FormItem
                        label='网格区域'
                        {...formItemLayout}>
                        {getFieldDecorator("wgArea", { initialValue: this.state.record.wgArea ? this.state.record.wgArea : null }, {

                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",
                            }]
                        })(<Input
                            allowClear={true}
                            style={{ width: '100%' }}
                            placeholder="请输入网格区域"
                        ></Input>)}
                    </FormItem>
                    <FormItem
                        label='所在区'
                        {...formItemLayout}>
                        {getFieldDecorator("county", { initialValue: this.state.record.county ? this.state.record.county : null }, {

                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",

                            }]
                        })(<Input
                            allowClear={true}
                            style={{ width: '100%' }}
                            placeholder="请输入所在区"
                        ></Input>)}
                    </FormItem>
                    <FormItem
                        label='联系电话'
                        {...formItemLayout}>
                        {getFieldDecorator("wgPhone", { initialValue: this.state.record.wgPhone ? this.state.record.wgPhone : null }, {

                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",

                            }]
                        })(<Input
                            allowClear={true}
                            style={{ width: '100%' }}
                            placeholder="请输入联系电话"
                        ></Input>)}
                    </FormItem>
                    <FormItem
                        label='详细地址'
                        {...formItemLayout}>
                        {getFieldDecorator("addressDetail", { initialValue: this.state.record.addressDetail ? this.state.record.addressDetail : null }, {

                            rules: [{
                                required: true,
                                transform: val => String(val),
                                type: "string",


                            }]
                        })(<Input
                            allowClear={true}
                            style={{ width: '100%' }}
                            placeholder="请输入详细地址"
                        ></Input>)}
                    </FormItem>

                </Form>
            </div>
        );
    }
}
const AddOutAdminGridform = Form.create()(addOutAdminGridform);




class GridMap extends Component {
    constructor(props) {

        super(props)
        this.state = {
            arr: props.markers || [],
            isFirstSearch: true,
            gridMap: null,
            center: [120.70833277343749, 29.99850503862479]

        }
    }

    componentDidMount() {
        let that = this
        let schoolId = parseInt(sessionStorage.getItem("departmentId"))
        //eslint-disable-next-line  
        var map = new AMap.Map('grid_map', {
            mapStyle: 'amap://styles/normal',
            // viewMode: '2D',
            viewMode: '2D',
            pitch: 56,
            zoom: 12,
            center: that.state.center,
            zooms: [4, 18]
        });
        that.initBounds(map)
        that.setState({
            gridMap: map
        })
        getSchoolInfoApi(schoolId)
            .then((res) => {
                if (res.data.position != '') {
                    let lon = parseFloat(res.data.position.toString().split(",")[0])
                    let lat = parseFloat(res.data.position.toString().split(",")[1])
                    var position = new AMap.LngLat(lon, lat);
                    let schoolpositon = {
                        longitude: lon,
                        latitude: lat
                    }
                    //eslint-disable-next-line  
                    var markerssss = new AMap.Marker({
                        map: map,
                        position: position,
                        icon: schoolimg,
                    });
                    map.add(markerssss);
                    map.setCenter(position);

                    this.setState({
                        schoolMakerPos: schoolpositon,
                        center: [lon, lat],
                    })
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });


        const rendermaker = (arr, len) => {
            arr.forEach((item, index) => {
                //eslint-disable-next-line  
                var markerssss = new AMap.Marker({
                    //eslint-disable-next-line  
                    position: new AMap.LngLat(parseFloat(item.position.longitude), parseFloat(item.position.latitude)),
                    icon: stu,
                });
                map.add(markerssss);
                var grade = item.identity || item.grade
                let gradename = item.identity ? "类型" : "班级"
                var content = `
                <div id="marker">
                <p> 姓名：${item.name} </p>
                <p> ${gradename}：${grade} </p>
                <p> 住址：${item.addressDetail} </p>
                </div>`
                
                AMap.event.addListener(markerssss, 'click', function (e) {
                    new AMap.InfoWindow({
                        isCustom: false,  //使用自定义窗体
                        content: content,  //传入 dom 对象，或者 html 字符串
                        offset: new AMap.Pixel(16, -50)
                    }).open(map, markerssss.getPosition());
                    map.setZoomAndCenter(16, [item.position.longitude, item.position.latitude])
                    
                });
                
            });
        }
        //分批加载marker点
        if (this.state.arr.length) {
            if (this.state.arr.length > 100) {
                let arr = this.state.arr.slice(0, 100)
                rendermaker(arr)
                setTimeout(() => {
                    rendermaker(this.state.arr.slice(100))
                }, 5000)

            } else {
                rendermaker(this.state.arr)

            }
        }


    }

    componentWillUnmount() {
        let map = this.state.gridMap
        map.destroy()
    }

    onSelect(value, key) {
        // this.setState({
        //     stupos: key.props.stuOption,
        //     zoom: 18,
        //     center: [key.props.stuOption.position.longitude, key.props.stuOption.position.latitude]
        // })
        this.searchPerson(key.props.stuOption)


    }


    onSearch(val) {
    }

    searchPerson = (stuoption) => {
        let map = this.state.gridMap
        var markerssss = this.state.markerssss || null
        let grade = stuoption.identity || stuoption.grade
        let gradename = stuoption.identity ? "类型" : "班级"
        let positon = new AMap.LngLat(stuoption.position.longitude, stuoption.position.latitude)
        var content = `
        <div id="marker">
        <p> 姓名：${stuoption.name} </p>
        <p>${gradename}：${grade} </p>
        <p> 住址：${stuoption.addressDetail} </p>
        </div>
        `

        const createMarker = () => {
            markerssss = new AMap.Marker({
                //eslint-disable-next-line  
                position: positon,
                icon: loc,
            });
            map.add(markerssss);
            AMap.event.addListener(markerssss, 'click', function (e) {
                new AMap.InfoWindow({
                    isCustom: false,   //使用自定义窗体
                    content: content,  //传入 dom 对象，或者 html 字符串
                    offset: new AMap.Pixel(16, -50)
                }).open(map, markerssss.getPosition());
                map.setZoomAndCenter(16, [stuoption.position.longitude, stuoption.position.latitude])
                
            });
            infoWindow.open(map, positon);
            map.setZoomAndCenter(16, [stuoption.position.longitude, stuoption.position.latitude])
            this.setState({
                markerssss: markerssss
            })

        }

        // 创建 infoWindow 实例 
        var infoWindow = new AMap.InfoWindow({
            isCustom: false,  //使用自定义窗体
            content: content,  //传入 dom 对象，或者 html 字符串
            offset: new AMap.Pixel(16, -50)
        });

        if (markerssss) {
            map.remove(markerssss)
            infoWindow.close();
            createMarker()

        } else {
            createMarker()
        }
    }



    initBounds = (map) => {

        //学校中心点



        //eslint-disable-next-line  

        var colors = [
            "#0A0A0C", "#12828A", "#ff9900", "#109618", "#0D9D8B", "#F0DDA6", "#dd4477", "#1D0749",

        ];


        //eslint-disable-next-line  
        AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {

            //创建一个实例
            var districtExplorer = new DistrictExplorer({
                map: map
            });


            function renderAreaNode(areaNode) {

                //绘制子区域
                districtExplorer.renderSubFeatures(areaNode, function (feature, i) {

                    var fillColor = colors[i % colors.length];
                    var strokeColor = colors[colors.length - 1 - i % colors.length];

                    return {
                        cursor: 'default',
                        bubble: true,
                        strokeColor: strokeColor, //线颜色
                        strokeOpacity: 1, //线透明度
                        strokeWeight: 2, //线宽
                        fillColor: fillColor, //填充色
                        fillOpacity: 0.1, //填充透明度
                    };
                });

                //绘制父区域
                districtExplorer.renderParentFeature(areaNode, {
                    cursor: 'default',
                    bubble: true,
                    strokeColor: '#fff', //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 1, //线宽
                    fillColor: null, //填充色
                    fillOpacity: 0.1, //填充透明度
                });
            }

            var adcodes = [330600];

            districtExplorer.loadMultiAreaNodes(adcodes, function (error, areaNodes) {

                //清除已有的绘制内容
                districtExplorer.clearFeaturePolygons();


                for (var i = 0, len = areaNodes.length; i < len; i++) {
                    renderAreaNode(areaNodes[i]);
                }

                //更新地图视野
                map.setFitView(districtExplorer.getAllFeaturePolygons());

                // map.setZoomAndCenter(15, this.state.position )


            });
        });


    }

    render() {
        let studentNameOption = this.state.arr.map((item, index) => (<Option key={item.id} stuOption={item} value={item.id} >{item.name}</Option>
        ))
        return (


            <div style={{ width: '100%', height: '80vh' }}>
                <Select
                    showSearch
                    style={{ width: 200, float: 'right', marginBottom: 16 }}
                    placeholder="Select a person"

                    onSelect={this.onSelect.bind(this)}

                    onSearch={this.onSearch}


                    optionFilterProp="children"

                    filterOption={(input, option) =>
                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }

                >

                    {
                        studentNameOption
                    }
                </Select>

                <div style={{ width: '100%', height: '90%' }} id="grid_map">

                </div>
            </div>
        )
    }
}
























export {
    StudentsGrid, FourSepcialGrid, AddGridFiveOldStaffGrid, OutAdminGrid
}